<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model中单个复选框的使用 -->
        <input type="checkbox" v-model="msg" @click="add">多选框

        <!-- v-model 数据双向绑定 当寻找data中的变量是空数组的时候  可以与value中的值进行双向绑定
            选中多选框则为将值放入变量中，
            可用后期数据的保存的
        -->
        <input type="checkbox" v-model="newcity"  value="北京">北京
        <input type="checkbox" v-model="newcity"  value="上海">上海
        <input type="checkbox" v-model="newcity"  value="武汉">武汉
        <input type="checkbox" v-model="newcity"  value="深圳">深圳

    </div>
    <script>    
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:true,
                    newcity:[]
                }
            },
            methods:{
                add(){
                    console.log(this.newcity);
                }
            }
        })

    </script>
</body>
</html>